<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播布局</title>
    <style>
        .box{
            width:500px;
            height:500px;
            border:10px solid green;
            overflow: hidden;
            position:relative;
        }
        ul,ol{
            list-style: none;
            padding:0;
            margin:0;
        }
        input{
            width:50px;
            height:50px;
            background-color:red;
            color:black;
            text-align:center;
            line-height:50px;
            font-size:30px;
            font-weight:bold;
            position: absolute;
            top:50%;
            margin-top:-25px;
            border:none;
        }
        .left{
            left:0;
        }
        .right{
            right:0;
        }
        ol{
            position: absolute;
            bottom: 20px;
            width:60px;
            left:50%;
            margin-left: -30px;

        }
        ol li{
            width:10px;
            height:10px;
            border-radius: 50%;
            background: white;
            float:left;
            margin:0 5px;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><a href="#"><img src="三玖天下第一.jpg"></a></li>
        <li><a href="#"><img src="background.jpg"></a></li>
        <li><a href="#"><img src="三玖天下第一.jpg"></a></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <input type="button" class="left" value="<">;
    <input type="button" class="right" value=">">;
</div>
</body>
</html>